<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="fonts/iconfont.js">
    <link rel="stylesheet" href="fonts/iconfont.json">
    <link rel="stylesheet" href="fonts/iconfont.css">
    <script src="js/jquery.js"></script>

</head>

<body>
    <header>

    </header>
    <div class="box">
        <div id="zoomBox">
            <div id="midArea">
                <img src="imgs/cart02.jpg" alt="">
                <div id="zoom"></div>
            </div>
            <div id="bigArea">
                <img src="imgs/cart02.jpg" alt="">
            </div>
            <div id="smallArea">
                <img src="imgs/mt.jpg" alt="" id="smallImg">
                <img src="imgs/fd2.jpg" alt="" id="smallImg">
                <img src="imgs/fd3.jpg" alt="" id="smallImg">
                <img src="imgs/fd4.jpg" alt="" id="smallImg">
            </div>
        </div>
        <div class="right">
            <h1> 43°茅台飞天500ml
            </h1>
            <div class="pric">
                <span>价格</span>
                <span>￥1099.00</span>
            </div>
            <div class="bh">数量
                <button class="jian">-</button>
                <input type="text" value="1" class="val">
                <button class="jia">+</button>
            </div>
            <div class="jr">
                <button class="btn"><a href="cart.html">加入购物车</a>
                    </button>
            </div>
            <div class="qt">
                提示：此商品不能使用优惠券&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此商品不支持货到付款
            </div>
        </div>


    </div>
    <script>
        //获取元素函数
        function $(id) {
            return document.getElementById(id)
        }
        class Zoom {
            constructor() {
                this.zoomBox = $("zoomBox");
                this.midArea = $("midArea");
                this.midImg = this.midArea.children[0];
                this.zoom = this.midArea.children[1];
                this.bigArea = $("bigArea");
                this.bigImg = this.bigArea.children[0];
                this.smallArea = $("smallArea");
                this.smallImg = document.querySelectorAll('#smallImg');
                this.show();


            };
            //显示效果
            show() {

                //鼠标移动过去事件   放大镜出现  图片放大效果出现
                this.midArea.onmouseover = () => {
                    this.zoom.style.display = "block";
                    this.bigArea.style.display = "block";

                };
                //鼠标移走 放大镜消失  图片放大效果消失
                this.midArea.onmouseout = () => {
                    this.zoom.style.display = "none";
                    this.bigArea.style.display = "none";
                };
                //鼠标拖动放大镜移动事件
                this.midArea.onmousemove = (e) => {
                    let evt = e || event;
                    //移动的距离=鼠标相当于文档的坐标-盒子的左边距-放大镜的一半
                    let x = evt.pageX - this.zoomBox.offsetLeft - this.zoom.offsetWidth / 2;
                    let y = evt.pageY - this.zoomBox.offsetTop - this.zoom.offsetHeight / 2;
                    //放大镜移动边界问题
                    if (x <= 0) { //左边出界
                        x = 0;
                    };
                    if (y <= 0) { //上面出界
                        y = 0
                    };
                    // //移动距离大于图片宽度
                    if (x >= this.midArea.offsetWidth - this.zoom.offsetWidth) {
                        x = this.midArea.offsetWidth - this.zoom.offsetWidth;
                    }
                    if (y >= this.midArea.offsetHeight - this.zoom.offsetHeight) {
                        y = this.midArea.offsetHeight - this.zoom.offsetHeight;
                    }
                    //放大镜移动定位
                    this.zoom.style.left = x + 'px';
                    this.zoom.style.top = y + 'px';
                    //放大图对应移动（相反方向移动）
                    //放大区域图片的宽度/原来图片宽度=放大倍数
                    this.bigImg.style.left = (-this.bigImg.offsetWidth / this.midImg.offsetWidth) * x + 'px';
                    this.bigImg.style.top = (-this.bigImg.offsetHeight / this.midImg.offsetHeight) * y + 'px';
                };


                //点击下面小图片显示对应的图
                for (let i = 0; i < this.smallImg.length; i++) {
                    smallImg[i].onclick = () => {
                        this.midImg.src = this.bigImg.src = this.smallImg[i].src;

                    }
                    smallImg[i].onmousemove = () => {
                        this.midImg.src = this.bigImg.src = this.smallImg[i].src;

                    }
                }
            };
        }
        new Zoom();
        /* let oDiv = document.querySelector(".bh");
        console.log(oDiv); */



        let jian = document.querySelector(".jian");
        let jia = document.querySelector(".jia");
        let val = document.querySelector(".val");
        let btn = document.querySelector(".btn");
        console.log(jian);
        jian.onclick = function() {
            val.value--;
            if (val.value < 1) {
                val.value = 1;
            }
        };
        jia.onclick = function() {
            val.value++;
            //真的要做限制，只能购买n件，或者库存限制
        };
        val.onblur = function() {
            if (val.value < 1) {
                val.value = 1;
            }
        };


        btn.onclick = function() {
            jQuery.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                uid: data.id,
                pid: idd,
                pnum: pm.value,

            }).then((res) => {
                console.log(res);

            });
            // cart.saveData(pid, Number(val.value));
            // location.href = "cart.html";
        };
        let idd = location.href.split("?")[1];
        let data = JSON.parse(localStorage.getItem("username"))
        let pm = document.querySelector(".val")
            // console.log(idd);

        jQuery.get("http://jx.xuzhixiang.top/ap/api/detail.php", {
            id: idd,
        }).then((res) => {
            /*  console.log(res.data); */
            // console.log(res)
            jQuery("#midArea img").attr("src", res.data.pimg);
            jQuery(".right h1").html(res.data.pname);
            jQuery(".pric span").html(res.data.pprice);
            jQuery("#smallArea img").attr("src", res.data.pimg);
            jQuery("#bigArea img").attr("src", res.data.pimg)
        })
    </script>
</body>

</html>

</html>